<template>
    <div>
        <div >
            <div :id="chartId" :style="{ height: chartHeight + 'px' }" />
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            titleText: { required: true, type: String },
            chartId: { required: true, type: String },
            chartHeight: { required: true, type: Number },
            barWidth: { required: false, type: Number, default: () => 24 },
            showSeries: { required: false, type: Boolean, default: () => false },
            chartData: { required: false, type: Array, default: () => [] },
            chartBgColor: { required: false, type: String, default: "transparent" },
            tooltipBackgroundColor: { required: false, type: String, default: ["rgba(44, 135, 213, 0.3)"] }, 
            tooltipBorderColor: { required: false, type: String, default: ["#fff"] }, 
            tooltipTxtColor: { required: false, type: String, default: ["#fff"] }, 
            chartXData: {
                required: false,
                type: Array,
                default: () => ["等级修理", "巡检巡修", "保障科研", "器材筹供"],
            },
            xaxisData: {
                required: false,
                type: Array,
                default: () => [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月",
                    "8月",
                    "9月",
                    "10月",
                    "11月",
                    "12月",
                ],
            },
            yaxisName: { required: false, type: String, default: "个" },
            yaxisData1: {
                required: false,
                type: Array,
                default: () => [20, 50, 44, 30, 14, 88, 44, 50, 40, 50, 40],
            },
            yaxisData2: {
                required: false,
                type: Array,
                default: () => [65, 30, 44, 50, 65, 19, 50, 60, 15, 70, 55],
            },
            yaxisData3: {
                required: false,
                type: Array,
                default: () => [70, 60, 78, 40, 25, 49, 40, 15, 50, 70, 25],
            },
            yaxisData4: {
                required: false,
                type: Array,
                default: () => [20, 30, 18, 70, 25, 59, 40, 65, 50, 70, 25],
            },
            chartColor: {
                required: false,
                type: Array,
                default: () => ["#0083D3", "#00994C", "#00AEB7", "#FF7F00", "#FFB600"],
            },
            txtColor:{
            required: false,
                type: Array,
                default: () => ["#000000"],
                },
            },
        data() {
            return {
                myChart: null,
            };
        },
        mounted() { },
        methods: {
            initChart() {
                var _this = this;
                if (this.myChart) {
                    document
                        .getElementById(this.chartId)
                        .removeAttribute("_echarts_instance_");
                }
                // 基于准备好的dom，初始化echarts实例
                this.myChart = echarts.init(document.getElementById(this.chartId));
                let charts = echarts.getInstanceByDom(
                    document.getElementById(this.chartId)
                );
                charts.getZr().off("click"); // 先取消点击，再触发，免得造成连续抖动触发
                charts.getZr().on("click", function (params) {
                    // 这个部分照抄，你想通过点击拿到的当前柱条的数据，都可以在下面这些属性中拿到，如果我注释没有你想要的，需要console一下charts.getOption()查找对应的属性名
                    let pointInPixel = [params.offsetX, params.offsetY];

                    if (charts.containPixel("grid", pointInPixel)) {
                        let pointInGrid = charts.convertFromPixel(
                            {
                                seriesIndex: 0,
                            },
                            pointInPixel
                        );
                        let xIndex = pointInGrid[1]; // 索引
                        let handleIndex = Number(xIndex);
                        //let seriesObj = charts.getOption(); // 图表object对象

                        let op = charts.getOption();
                        let valueX = op.xAxis[0].data[op.xAxis[0].axisPointer.value];//获取点击的x坐标所在地
                        _this.$emit("selectX", valueX);
                        //获得图表中点击的列
                        //let dataY = op.yAxis[0].data[handleIndex];  			//获取点击的列名

                        //let dataX = seriesObj.series[0].data[handleIndex]   	// 获取当前点击的柱条的数值
                    }
                });

                // var ct = new Date()
                // var nowMonth = ct.getMonth()

                var series = [];
                this.chartXData.forEach((item, i) => {
                    if (!item.unDisplay) {
                        series.push({
                            type: "bar",
                            data: item.value,
                            name: item.name,
                            barWidth: this.barWidth,
                            barGap: 0,
                            label: {
                                show: this.showSeries,
                                position: "top",
                                padding: 0,
                                fontSize: 14,
                                color: this.txtColor[0],
                                fontWeight: "bold",
                                formatter: function (item) {
                                    return item.value;
                                }
                            },
                            itemStyle: {
                                color: _this.chartColor[i],
                            },
                        });
                    }
                });
                // 绘制图表
                this.myChart.setOption({
                    title: {
                        text: this.titleText,
                        textStyle: {
                            align: 'center',
                            color: this.txtColor[0],

                        },
                        top: '3%',
                        left: '1%',
                    },
                    backgroundColor: "transparent",
                    legend: {
                        orient: "horizontal",
                        top: '3%',
                        right: "3%",
                        itemWidth: 20,
                        itemHeight: 4,
                        icon: "react",
                        itemGap: 17,
                        align: "right",

                        textStyle: {
                            color: this.txtColor[0],
                            fontSize: 14,
                            fontFamily: "AlibabaPuHuiTi-Medium",

                        },
                        // formatter() {
                        //   return "";
                        // }
                    },
                    yAxis: [
                        {
                            name: "(" + _this.yaxisName + ")",
                            nameTextStyle: {
                                color: this.txtColor[0],
                                fontWeight: 400,
                                fontSize: 12,
                            },
                            axisLabel: {
                                color: this.txtColor[0],
                            },
                            axisLine: {
                                show: true,
                                symbol: ["none", "rect"],
                                symbolSize: [6, 12],
                                lineStyle: {
                                    width: 2,
                                    color: this.txtColor[0],
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                            },
                        },
                        {
                            type: "value",
                            gridIndex: 0,
                            splitNumber: 8,
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                show: false,
                            },
                            splitArea: {
                                show: true,
                                areaStyle: {
                                    color: "transparent",
                                },
                            },
                        },
                    ],
                    xAxis: {
                        data: this.xaxisData,
                        axisLabel: {
                            color: this.txtColor[0],
                            interval: 0,
                        },
                        axisLine: {
                            show: true,
                            symbol: ["none", "rect"],
                            symbolSize: [6, 12],
                            lineStyle: {
                                width: 2,
                                color: this.txtColor[0],
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    grid: {
                        left: "1%",
                        right: "1%",
                        top: "23%",
                        bottom: "0%",
                        containLabel: true,
                    },
                    tooltip: {
                        // 鼠标悬浮弹窗
                        trigger: "axis",
                        confine: true,
                        backgroundColor: this.tooltipBackgroundColor[0],
                        borderColor: this.tooltipBorderColor[0],
                        // extraCssText: 'box-shadow: 2px 2px 4px 0px rgba(255, 132, 90, 0.3);',
                        textStyle: {
                            fontSize: 14,
                            color: this.tooltipTxtColor[0],
                            fontFamily: "PangMenZhengDao",

                        },
                        formatter: function (params) {
                            var relVal = params[0].name;
                            for (var i = 0; i < params.length; i++) {
                                relVal +=
                                    "<br/>" +
                                    params[i].marker +
                                    params[i].seriesName +
                                    ": " +
                                    params[i].value +
                                    " (" +
                                    _this.yaxisName +
                                    ")";
                                // +
                                // " " +
                                // params[i].data.num +
                                // "个"
                            };
                            //对于鼠标悬浮弹窗增加显示其他数据而做filter
                            var unDisplayData = _this.chartXData.filter(x => x.unDisplay);
                            var index = params[0].dataIndex;
                            if (unDisplayData.length > 0) {
                                for (var i = 0; i < unDisplayData.length; i++) {
                                    relVal +=
                                        "<br/>" +
                                        params[0].marker +
                                        unDisplayData[i].name +
                                        ": " +
                                        unDisplayData[i].value[index] +
                                        " (" +
                                        _this.yaxisName +
                                        ")";
                                };
                            }
                            return relVal;
                        },
                        axisPointer: {
                            type: "line",
                            lineStyle: {
                                color: "#2c87d5",
                            },
                        },
                    },
                    dataZoom: [
                        {
                            xAxisIndex: 0, // 这里是从X轴的0刻度开始
                            show: false, // 是否显示滑动条，不影响使用
                            type: "inside", // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                            // startValue: nowMonth < 6 ? 0 : nowMonth - 5, // 从头开始。
                            startValue: 0, // 从头开始。
                            // endValue: nowMonth // 结束的月份。
                            endValue: 12, // 结束的月份。
                        },
                    ],
                    series: series,
                });
            },
            changeSize(height) {
                // var myChart = echarts.init(document.getElementById(this.chartId))
                this.myChart.resize("auto", height);
            },
        },
        template: "#template"
    };
</script>
<style scoped>
    .view_chart {
        width: 100%;
        padding: 20px 10px 0;
    }
</style>
